<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>编辑权限</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/custom.form.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>

<body>
<div class="layui-form layuimini-form">
    <div class="layui-form-item">
        <div class="layui-input-inline">
            <input type="hidden" th:value="${id}" id="id"  name="id" class="layui-input">
        </div>
    </div>
    <input type="hidden"  id="pid"  name="pid" class="layui-input">

    <div class="layui-form-item">
        <label class="layui-form-label">角色名称</label>
        <div class="layui-input-inline">
            <input type="name" id="name" name="name" placeholder="请输入角色名称" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-form-label ">备注</div>
        <div class="layui-input-inline">
            <input type="description" id="description" name="description" placeholder="请输入备注信息" autocomplete="off"
                   class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-inline">
            <input type="checkbox" id="status" name="status" lay-skin="switch" lay-filter="switch" lay-text="启用|禁用" checked>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">请选择权限</label>
        <div class="layui-input-inline">
            <div class="layui-form-item">
                <div class="layui-tree">
                    <div id="permissionTree"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="submit">确认保存</button>
        </div>
    </div>
</div>
<script src="/layui/layui.all.js"></script>
<script src="/js/core.util.js"></script>
<script th:inline="none">
    var form = layui.form;
    var layer = layui.layer;
    var $ = jQuery = layui.jquery;
    var tree = layui.tree;
    var curIfr = parent.layer.getFrameIndex(window.name);
    window.onload = function (){
        var id = $("#id").val()
        if(!CoreUtil.isEmpty(id)){
            CoreUtil.sendGet('/sys/role/'+id,null,function (res){
                $("#name").val(res.data.name);
                $("#pid").val(res.data.pid);
                $("#description").val(res.data.description);
                if (res.data.status == 1) {
                    $("#tatus").attr('checked', 'checked');
                    $("#status").attr('type', 'hidden').val(1);
                    var x = document.getElementsByClassName("layui-unselect layui-form-switch");
                    x[0].setAttribute("class", "layui-unselect layui-form-switch layui-form-onswitch");
                    var d = document.getElementsByTagName('em')[0];
                    d.firstChild.nodeValue = '启用';
                } else {
                    $("#status").attr('type', 'hidden').removeAttr("checked").val(0);
                    var x = document.getElementsByClassName("layui-unselect layui-form-switch");
                    x[0].setAttribute("class", "layui-unselect layui-form-switch");
                    var d = document.getElementsByTagName('em')[0];
                    d.firstChild.nodeValue = '禁用';
                }
                loadPermissionTree(res.data.permissionRespNodes);
            })
        }else {
            initTree();
            $("#status").attr('checked', 'checked');
            $("#status").attr('type', 'hidden').val(1);
            var x = document.getElementsByClassName("layui-unselect layui-form-switch");
            x[0].setAttribute("class", "layui-unselect layui-form-switch layui-form-onswitch");
            var d = document.getElementsByTagName('em')[0];
            d.firstChild.nodeValue = '启用';
        }
    }

    //监听提交
    form.on('submit(submit)', function (data) {
        console.log(data)
        let permissionIds = [];
        let brchArrays = tree.getChecked('permissionIds');
        let params = {
            id: data.field.id,
            name: data.field.name,
            description: data.field.description,
            status: data.field.status,
            permissions: getPermissionIds(brchArrays, permissionIds)
        }
        if (data.field.id === undefined || data.field.id === null || data.field.id === "") {

            CoreUtil.sendPost("/sys/role", params, function (res) {
                if(res.code == 0){
                    //跳出提示
                    parent.layer.msg(res.msg);
                    //刷新表格
                    parent.location.reload();
                    //关闭窗口
                    parent.layer.close(curIfr);
                }else{
                    layer.msg(res.msg);
                }
            });
        } else {
            CoreUtil.sendPut("/sys/role", params, function (res) {
                if(res.code == 0){
                    //跳出提示
                    parent.layer.msg(res.msg);
                    //刷新表格
                    parent.location.reload();
                    //关闭窗口
                    parent.layer.close(curIfr);
                }else{
                    layer.msg(res.msg);
                }
            });
        }
        return false;
    });
    form.on('switch(switch)', function () {
        $("#status").attr('type', 'hidden').val(this.checked ? 1 : 0);

    });

    var initTree = function () {
        CoreUtil.sendGet("/sys/permission/tree/all", null, function (res) {
            loadPermissionTree(res.data);
        });
    };
    var loadPermissionTree = function (data) {
        tree.render({
            elem: '#permissionTree'
            , data: data
            , onlyIconControl: true  //是否仅允许节点左侧图标控制展开收缩
            , showCheckbox: true  //是否显示复选框
            , id: 'permissionIds'
            , accordion: false
            , click: function (obj) {
                selectNode = obj;
                layer.msg(JSON.stringify(selectNode.data.title));
            }
        });
    };
    function getPermissionIds(jsonObj, permissionIds) {
        if (jsonObj == undefined || jsonObj == null || !jsonObj instanceof Object) {
            return null;
        }
        for (let i = 0; i < jsonObj.length; i++) {
            permissionIds.push(jsonObj[i].id);
            getPermissionIds(jsonObj[i].children, permissionIds);
        }
        return permissionIds;
    }
</script>
</body>
</html>